<template>
	<div>
		<el-card class="box-card">
			<el-row :gutter="30">
				<el-col v-bind="state.grid" class="left mb15 ml40">
					<div>
<!--						<img class="top" src="/img/mobilehead.png">-->
<!--						<img class="bottom" src="/img/mobilefoot.png">-->
						<div style="background: #F4F5F9; min-height: 438px; position: absolute;top: 63px; width: 320px;"/>
						<div class="textbot">
							<div v-for="(item,indx) in state.list" :key="indx" class="li"
									 :class="{active:item === state.formValidate}">
								<div>
									<div class="add" @click="add(item,indx)">
										<el-icon><Plus /></el-icon>
										<div class="arrow" />
									</div>
									<div class="tianjia">
										<div
											v-for="(j,index) in item.sub_button"
											:key="index"
											class="addadd menuBox"
											:class="{active:j === state.formValidate}"
											@click="gettem(j,index,indx)"
										>
											<el-tooltip class="item" effect="dark" :content="j.name"
																	placement="top-start">
												<el-button>{{ j.name || '二级菜单' }}</el-button>
											</el-tooltip>
										</div>
									</div>
								</div>
								<div class="text menuBox" @click="gettem(item,indx,null)">
									<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
										<el-button>{{ item.name || '一级菜单' }}</el-button>
									</el-tooltip>
								</div>
							</div>
							<div v-show="state.list.length < 3" class="li">
								<div class="text" @click="addtext"><i class="el-icon-plus" /></div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :xl="11" :lg="12" :md="22" :sm="22" :xs="22">
					<div v-if="state.heckedMenuId !== null">
						<div class="dividerTitle acea-row row-between row-bottom">
							<span class="title">菜单信息</span>
							<el-button slot="extra" size="small" type="danger" @click="deltMenus">删除</el-button>
							<el-divider />
						</div>
						<el-col :span="24" class="userAlert">
							<div class="box-card right">
								<el-alert
									class="mb15"
									title="已添加子菜单，仅可设置菜单名称"
									type="success"
									show-icon
								/>
								<el-form
									ref="ruleFormRef"
									:model="state.formValidate"
									:rules="state.ruleValidate"
									label-width="100px"
									class="mt20">
									<el-form-item label="菜单名称" prop="name">
										<el-input v-model="state.formValidate.name" placeholder="请填写菜单名称"
															class="spwidth" />
									</el-form-item>
									<el-form-item label="规则状态" prop="type">
										<el-select v-model="state.formValidate.type" placeholder="请选择规则状态"
															 class="spwidth">
											<el-option value="click" label="关键字">关键字</el-option>
											<el-option value="view" label="跳转网页">跳转网页</el-option>
											<el-option value="miniprogram" label="小程序">小程序</el-option>
										</el-select>
									</el-form-item>
									<div v-if="state.formValidate.type === 'click'">
										<el-form-item label="关键字" prop="key">
											<el-input v-model="state.formValidate.key" placeholder="请填写关键字"
																class="spwidth" />
										</el-form-item>
									</div>
									<div v-if="state.formValidate.type === 'miniprogram'">
										<el-form-item label="appid" prop="appid">
											<el-input v-model="state.formValidate.appid" placeholder="请填写appid"
																class="spwidth" />
										</el-form-item>
										<el-form-item label="备用网页" prop="url">
											<el-input v-model="state.formValidate.url" placeholder="请填写备用网页"
																class="spwidth" />
										</el-form-item>
										<el-form-item label="小程序路径" prop="pagepath">
											<el-input v-model="state.formValidate.pagepath"
																placeholder="请填写小程序路径" class="spwidth" />
										</el-form-item>
									</div>
									<div v-if="state.formValidate.type === 'view'">
										<el-form-item label="跳转地址" prop="url">
											<el-input v-model="state.formValidate.url" placeholder="请填写跳转地址"
																class="spwidth" />
										</el-form-item>
									</div>
								</el-form>
							</div>
						</el-col>
					</div>
					<el-col :span="24">
						<el-button size="mini" type="primary"
											 style="display: block;margin: 10px auto;"
											 @click="submenus(ruleFormRef)">保存并发布
						</el-button>
					</el-col>
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import type {  FormInstance } from 'element-plus';
import {
	Plus
} from '@element-plus/icons-vue'
import { http } from '~/composables/http'

const ruleFormRef = ref<FormInstance>();
const state = reactive(<any>{
	grid: {
		xl: 8,
		lg: 8,
		md: 8,
		sm: 8,
		xs: 24
	},
	grid2: {
		xl: 16,
		lg: 16,
		md: 16,
		sm: 16,
		xs: 24
	},
	modal2: false,
	formValidate: {
		name: '',
		type: 'click',
		appid: '',
		url: '',
		key: '',
		pagepath: '',
		id: 0
	},
	ruleValidate: {
		name: [
			{ required: true, message: '请填写菜单名称', trigger: 'blur' }
		],
		key: [
			{ required: true, message: '请填写关键字', trigger: 'blur' }
		],
		appid: [
			{ required: true, message: '请填写appid', trigger: 'blur' }
		],
		pagepath: [
			{ required: true, message: '请填写小程序路径', trigger: 'blur' }
		],
		url: [
			{ required: true, message: '请填写跳转地址', trigger: 'blur' }
		],
		type: [
			{ required: true, message: '请选择规则状态', trigger: 'change' }
		]
	},
	parentMenuId: null,
	list: [],
	checkedMenuId: null,
	isTrue: false
});

function init() {
	getMenus();
	// if (state.list.length) {
	//     state.formValidate = state.list[state.activeClass]
	// } else {
	//     return state.formValidate
	// }


}

init();

// 添加一级字段函数
function defaultMenusData() {
	return {
		type: 'click',
		name: '',
		sub_button: []
	};
}

// 添加二级字段函数
function defaultChildData() {
	return {
		type: 'click',
		name: ''
	};
}

// 新增data
function putData() {
	const data = {
		button: state.list
	};
	postRequest('/api/admin/wxchat/create', data).then(res => {
		console.log(res);
		ElMessage.success('提交成功');
		state.checkedMenuId = null;
		state.formValidate = {};
		state.isTrue = false;
	});

}

// 判断函数
function check() {
	const reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
	if (state.checkedMenuId === null) return true;
	if (!state.isTrue) return true;
	if (!state.formValidate.name) {
		ElMessage.warning('请输入按钮名称!');
		return false;
	}
	if (state.formValidate.type === 'click' && !state.formValidate.key) {
		ElMessage.warning('请输入关键字!');
		return false;
	}
	if (state.formValidate.type === 'view' && !(reg.test(state.formValidate.url))) {
		ElMessage.warning('请输入正确的跳转地址!');
		return false;
	}
	if (state.formValidate.type === 'miniprogram' &&
		(!state.formValidate.appid ||
			!state.formValidate.pagepath ||
			!state.formValidate.url)) {
		ElMessage.warning('请填写完整小程序配置!');
		return false;
	}
	return true;
}

// 获取 菜单
function getMenus() {
	http.get('/api/admin/wxchat/get', null).then((res: any) => {
		console.log(res);
		const data = res.data.menu;
		state.list = data.button;
	});
}

// 点击元素
function gettem(item: any, index: any, pid: any) {
	state.checkedMenuId = index;
	state.formValidate = item;
	state.parentMenuId = pid;
	state.isTrue = true;
}

// 增加二级
function add(item: any, index: any) {
	if (!check()) return false;
	if (item.sub_button.length < 5) {
		const data = defaultChildData();
		const id = item.sub_button.length;
		item.sub_button.push(data);
		state.formValidate = data;
		state.checkedMenuId = id;
		state.parentMenuId = index;
		state.isTrue = true;
	}
}

// 增加一级
function addtext() {
	if (!check()) return false;
	const data = defaultMenusData();
	const id = state.list.length;
	state.list.push(data);
	state.formValidate = data;
	state.checkedMenuId = id;
	state.parentMenuId = null;
	state.isTrue = true;
}

// 删除
function deltMenus() {
	if (state.isTrue) {
		del();
	} else {
		ElMessage.warning('请选择菜单!');
	}
}
function del() {
	state.parentMenuId = null;
	state.formValidate = {
		name: '',
		type: 'click',
		appid: '',
		url: '',
		key: '',
		pagepath: '',
		id: 0
	};
	state.isTrue = false;
	state.modal2 = false;
	state.checkedMenuId = null;
}
const submenus = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	if (state.isTrue && !state.checkedMenuId && state.checkedMenuId !== 0) {
		putData();
	} else {
		await formEl.validate((valid, fields) => {
			if (valid) {
				putData();
			} else {
				if (!check()) return false;
			}
		});
	}
};

</script>


<style scoped lang="scss">
.menuBox {
	:deep(.el-button) {
		border: none;
		background: bottom;
		padding: 0 !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}
}

* {
	-moz-user-select: none; /*火狐*/
	-webkit-user-select: none; /*webkit浏览器*/
	-ms-user-select: none; /*IE10*/
	-khtml-user-select: none; /*早期浏览器*/
	user-select: none;
}

.title {
	margin-bottom: -19px !important;
	padding-bottom: 17px !important;
}

.left {
	min-width: 390px;
	min-height: 550px;
	position: relative;
	padding-left: 40px;
}

.top {
	position: absolute;
	top: 0px;
}

.bottom {
	position: absolute;
	bottom: 0px;
}

.textbot {
	position: absolute;
	bottom: 0px;
	left: 59px;
	width: 100%;
}

.active {
	border: 1px solid #44B549 !important;
	color: #44B549 !important;
}

.li {
	float: left;
	width: 93px;
	line-height: 48px;
	border: 1px solid #E7E7EB;
	background: #FAFAFA;
	text-align: center;
	cursor: pointer;
	color: #999;
	position: relative;
}

.text {
	height: 50px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text:hover {
	color: #000;
}

.add {
	position: absolute;
	bottom: 65px;
	width: 100%;
	line-height: 48px;
	border: 1px solid #E7E7EB;
	background: #FAFAFA;
}

.arrow {
	position: absolute;
	bottom: -16px;
	left: 36px;
	/* 圆角的位置需要细心调试哦 */
	width: 0;
	height: 0;
	font-size: 0;
	border: solid 8px;
	border-color: #fff #F4F5F9 #F4F5F9 #F4F5F9;
}

.tianjia {
	position: absolute;
	bottom: 115px;
	width: 100%;
	line-height: 48px;
	background: #FAFAFA;
}

.addadd {
	width: 100%;
	line-height: 48px;
	border: 1px solid #E7E7EB;
	background: #FAFAFA;
	height: 48px;
	padding: 0 5px;
	box-sizing: border-box;
}

.right {
	background: #fff;
	min-height: 400px;
}

.spwidth {
	width: 100%;
}
</style>
